<template>
  <view class="container" :style="appThemeStyle">
    <u-search
      placeholder="搜索聊天记录"
      :show-action="true"
      v-model="searchValue"
      shape="square"
      @search="onSearch"
      @custom="onClear"
      @clear="onClear"
      action-text="取消"
      :animation="true"
      bg-color="#ffffff"
    />
    <view class="message-content" v-if="messageList.length">
      <view class="message-list">
        <view class="message-title">群消息（2）</view>
        <view class="message-item" v-for="(item, index) in 2" :key="index" @click="toMessage">
          <view class="message-left">
            <image src="https://static.zwztf.net/10000001/img/d52afb2e-4782-45d9-9e62-42a91535675e.png"></image>
            <view class="message-info">
              <view class="message-name">
                <text class="name">合家福中心店</text>
                <text class="channel">饿</text>
              </view>
              <view class="message-text">
                <text :class="['m-r-10', { active: true }]">[顾客消息]</text>
                <text>啥时候配送？</text>
              </view>
            </view>
          </view>
          <view class="message-right">
            <view class="time">14:06</view>
            <text class="badge">99+</text>
          </view>
        </view>
      </view>
      <view class="message-list">
        <view class="message-title">顾客消息（2）</view>
        <view class="message-item" v-for="(item, index) in 3" :key="index" @click="toMessage">
          <view class="message-left">
            <image src="https://static.zwztf.net/10000001/img/f3f9b0d6-3981-4342-bba6-6ba879145bef.png"></image>
            <view class="message-info">
              <view class="message-name">
                <text class="name">合家福中心店</text>
                <text class="channel">饿</text>
              </view>
              <view class="message-text">
                <text :class="['m-r-10', { active: true }]">[顾客消息]</text>
                <text>啥时候配送？</text>
              </view>
            </view>
          </view>
          <view class="message-right">
            <view class="time">14:06</view>
            <text class="badge">99+</text>
          </view>
        </view>
      </view>
    </view>
    <Empty url="empty-msg" tips="当前没有会话！" v-else/>
  </view>
</template>
<script>

import Empty from '@/components/empty'

export default {
  name: "index",
  components: { Empty },
  data() {
    return {
      searchValue: '',
      messageList: []
    }
  },
  onLoad() {
  },
  methods: {
    onSearch() {
    },
    onClear() {
      this.searchValue = ''
    },
    toMessage() {
      this.$navTo('messagepages/message/detail')
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 24rpx;

  .message-list {
    margin-top: 16rpx;
    padding: 0 24rpx;
    background: #fff;
    border-radius: 16rpx;

    .message-title {
      font-size: 30rpx;
      font-weight: bold;
      padding-top: 32rpx;
    }

    .message-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border: none;
      }

      .message-left {
        display: flex;
        align-items: center;

        image {
          width: 84rpx;
          height: 84rpx;
          border-radius: 16rpx;
          margin-right: 20rpx;
        }

        .message-info {
          display: flex;
          flex-direction: column;
          justify-content: center;

          .message-name {
            margin-bottom: 10rpx;

            .name {
              color: #333;
              font-size: 28rpx;
              font-weight: bold;
            }

            .channel {
              padding: 5rpx 8rpx;
              background: $main-bg;
              color: #fff;
              font-size: 20rpx;
              border-radius: 8rpx;
              margin-left: 8rpx;
            }
          }

          .message-text {
            color: #8C8C8C;
            font-size: 26rpx;

            .active {
              color: $main-bg;
            }
          }
        }
      }

      .message-right {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .time {
          color: #BFBFBF;
          font-size: 24rpx;
          margin-bottom: 10rpx;
        }

        .badge {
          background: #F53F3F;
          font-size: 20rpx;
          color: #ffffff;
          padding: 5rpx 8rpx;
          border-radius: 24rpx;
        }
      }
    }
  }
}
</style>
